-
-
Notifications
You must be signed in to change notification settings - Fork 9.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: support unplugin-auto-import plugin #12679
Conversation
By adding showXXXX processing logic to resolve, now VantResolver supports unplugin-auto-import. That is: // Vite.config.ts export default defineConfig({ plugins: [ AutoImport({ resolvers: [VantResolver()] }), ] }) So that: // App.vue <script setup lang="ts"> function clickHandler() { showNotify('It works') } </script> <template> <VanButton type="success" @click="clickHandler">button</VanButton> </template> can work because unplugin-auto-import will introduce function and style automatically.
目前的 resolver 支持 unplugin-vue-components 来自动注册并导入组件,但是并不支持自动导入 api(如showToast、showDialog),通过在 resolve 中添加相关逻辑可以使得 resolver 支持 unplugin-auto-import,从而可以自动导入相关 api |
我觉得可以在补充下使用文档 |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #12679 +/- ##
==========================================
- Coverage 89.78% 89.76% -0.02%
==========================================
Files 257 257
Lines 6832 6832
Branches 1659 1659
==========================================
- Hits 6134 6133 -1
Misses 374 374
- Partials 324 325 +1 ☔ View full report in Codecov by Sentry. |
补充了 resolver 的文档以及快速上手的对应内容 |
@@ -70,6 +70,13 @@ export function VantResolver(options: VantResolverOptions = {}) { | |||
from: `vant/${moduleType}`, | |||
sideEffects: getSideEffects(kebabCase(partialName), options), | |||
}; | |||
} else if (name.startsWith('show')) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个判断比较松散,会不会导致所有以 show 开头的 method 都被插件处理(可能会误伤)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
您好,您说的这个问题我之前也考虑过,我认为出现误伤的概率极小。
您说的误伤的情况可以分为两种:
- 用户忘了导入某个 show 开头的函数,导致 unplugin-auto-import 插件处理了该函数。这种情况实际上是用户的疏忽,由于对于 API 的导入语句不会正常运行,因此用户能够发现自己的问题,从而修正错误。
- 用户使用的另外一个库也通过插件 按需导入 API,且 API 也以 show 开头,导致撞车。这种可能性实际上并不大(会实现按需导入功能的库一般是组件库,这些库的 API 一般以大写字母开头,如 ElMessage,以 show 开头的可能性不大),相比于这种低概率的风险,给用户带来的便利是更值得争取的。
当然,也可以处理的更加细致,即只处理库中出现的 Toast,Dialog,Notify 和 ImagePreview 四个组件。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
刚发现大佬你也是北航软院的,也在美团工作过,真巧
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
您好,您说的这个问题我之前也考虑过,我认为出现误伤的概率极小。 您说的误伤的情况可以分为两种:
- 用户忘了导入某个 show 开头的函数,导致 unplugin-auto-import 插件处理了该函数。这种情况实际上是用户的疏忽,由于对于 API 的导入语句不会正常运行,因此用户能够发现自己的问题,从而修正错误。
- 用户使用的另外一个库也通过插件 按需导入 API,且 API 也以 show 开头,导致撞车。这种可能性实际上并不大(会实现按需导入功能的库一般是组件库,这些库的 API 一般以大写字母开头,如 ElMessage,以 show 开头的可能性不大),相比于这种低概率的风险,给用户带来的便利是更值得争取的。
当然,也可以处理的更加细致,即只处理库中出现的 Toast,Dialog,Notify 和 ImagePreview 四个组件。
但是为了防止这种错误,我们可以加一层判断 name.startsWith("show") && ['showNotify','showToast'].includes(name)
对用户来说,是真的很方便,之前也有很多 issue 提 api 类型的问题
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@DragonnZhang 哈哈,缘分 😄
@wChenonly 嗯嗯,同意加一层判断,精确匹配 Vant 中的几个 showXX 和 closeDialog 等方法
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@DragonnZhang 哈哈,缘分 😄
@wChenonly 嗯嗯,同意加一层判断,精确匹配 Vant 中的几个 showXX 和 closeDialog 等方法
新的 commit 精确匹配了 vant 中的方法
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
棒 👍 已发布 @vant/auto-import-resolver v1.1.0
@DragonnZhang Hi,可否针对 当前现象描述:项目初始的 期望现象描述: 这样在方便使用的同时,也能在项目初始将 |
感谢您的建议!如果我没理解错的话,您希望增加一个函数,能够返回 vant 的所有 api,从而可以在 imports 中全局导入这些 api,就像这个样子: import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
// 新增 VantImports
import { VantResolver, VantImports } from './src/test-resolver/vantResolver'
export default defineConfig({
plugins: [
AutoImport({
resolvers: [VantResolver()],
imports: [
'vue',
'vue-router',
// VantImports 返回一个数组,包含所有的 vant api,即 ['showDialog', 'closeDialog', ..., 'resetToastDefaultOptions']
{ 'vant/es': VantImports() }
]
}),
vue()
]
}) 或许您可以提个 issue,让 vant 官方评审一下这个需求,因为我不是官方人员,不确定这个地方是否要做这样的优化。 vant/packages/vant-auto-import-resolver/src/index.ts Lines 62 to 87 in 8cb3fe5
|
@DragonnZhang 感谢您提供的代码示例,我会尝试提交一个 issue 或 pr |
By adding showXXXX processing logic to resolve, now VantResolver supports unplugin-auto-import. That is:
So that:
can work because unplugin-auto-import will introduce function and style automatically.